<template>
    <div class="options">
      <el-button type="primary" @click="handleOpenEdit({ serviceType: null })"
        >添加服务类型</el-button
      >
    </div>
    <el-table
      :data="props.list"
      v-loading="props.loading"
      lazy
      table-layout="auto"
    >
    <el-table-column label="状态" width="120">
  <template #default="{ row }">
    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
      {{ row.status === 1 ? '启用' : '禁用' }}
    </el-tag>
  </template>
</el-table-column>
      <el-table-column label="医生服务类型名称">
        <template #default="{ row }">
          <el-tag> {{ row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right">
  <template #default="{ row }">
    <!-- 确保传递完整的行数据 -->
    <el-button type="info" @click="handleOpenEdit(row)" link>编辑</el-button>
    <el-button type="danger" @click="handleDel(row.serviceTypeId)" link>删除</el-button>
  </template>
</el-table-column>
    </el-table>
    <edit
      v-if="showEdit"
      @close="showEdit = false"
      @success="handleEditSuccess"
      ref="editRef"
    />
  </template>
  
  <script setup>
  import { defineProps, nextTick, ref, defineEmits } from "vue";
  import feedback from "@/utils/feedback";
  import { deleteDoctorServiceTypeAPI } from "@/network/doctor_service_type"; // 替换为实际的 API 导入路径
  import edit from "./editDoctorServiceType.vue";
  import { Timer } from "@element-plus/icons-vue";
  
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(["refresh"]);
  
  const editRef = ref(null);
  const showEdit = ref(false);
  const handleDel = async (id) => {
  try {
    await feedback.confirm("确定删除?");
    await deleteDoctorServiceTypeAPI(id);
    feedback.msgSuccess("删除成功");
    emits("refresh");  // 触发列表刷新
  } catch {
    feedback.msgError("删除失败");
  }
};
  // id 为 number 类型 为 false 则为编辑模式
  const handleOpenEdit = async (row) => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open(row);
  };
  
  const handleEditSuccess = () => {
    showEdit.value = false;
    emits("refresh");
  };
  </script>
  
  <style lang="less" scoped>
  .options {
    margin: 10px 0px;
  }
  ::v-deep .el-table__cell {
    z-index: auto; /*初始化z-index层叠上下文（z-index:0），防止与盒子内部的z-index属性的盒子层级有冲突*/
  }
  .list-enter-active {
    transition: all 0.5s ease;
  }
  .list-enter-from {
    opacity: 0;
    transform: translateY(10px);
  }
  </style>